<template>
    <div>
        <div class="nav">
            <img v-if="needPhoneTop" class="phone-top" src="@/assets/img/phoneTop.png" alt="">
            <div class="navBar" :style="{marginTop:needPhoneTop?'-.44rem':'0' }">
                <div class="back-icon">
                    <img @click="backRouter()" src="@/assets/img/left.png" alt="">
                </div>
                <div class="navbar-title">{{pageTit}}</div>
                <div class="zancun"><span v-if="needZanC">暂存</span></div>
            </div>
            <div class="split"></div>
        </div>
        <div class="empty" :style="{height:needPhoneTop?'.88rem':'.5rem' }"></div>
    </div>
</template>

<script>
    export default {
        name: "navBar",
        data() {
            return {}
        },
        props: {
            pageTit: {
                type: String,
                default: ''
            },
            needPhoneTop: {   // 是否需要模拟电量
                type: Boolean,
                default: false
            },
            needZanC: {   // 是否显示暂存
                type: Boolean,
                default: false
            }
        },
        methods: {
            backRouter() {
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped>
    .empty {
        width: 100%;
        height: .88rem;
    }

    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 88;
        background-color: #fff;
    }

    .phone-top {
        width: 100%;
        /*height: .44rem;*/
    }

    .navBar {
        height: .44rem;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .back-icon {
        width: .2rem;
        height: .2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 .1rem;
    }

    .back-icon > img {
        width: .08rem;
    }

    .navbar-title {
        font-size: .17rem;
        text-align: center;
        flex-grow: 1;
        /*padding-right: .3rem;*/
        font-weight: 500;
    }

    .zancun {
        width: .3rem;
        height: 100%;
        margin-right: .1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .zancun > span {
        font-size: .14rem;
        color: #2D2D2D;
    }

    .split {
        width: 100%;
        height: .06rem;
        background: #F2F3F5;
    }
</style>
